<template>
  <div class="nav">
            <div class="top">
                <p>＜</p>
                <input type="text" placeholder="搜索商品名称"> <span>搜索</span>
            </div>
            <div class="middle">
                <div class="title">历史搜索</div>
                <button>删</button>
            </div>
            <div class="con">牛肉面</div>
            <div class="left">
                <div class="head">搜索发现</div>
            </div>
            <div class="last">
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
                <span>牛肉面</span>
            </div>
        </div>
</template>
<script>
export default {

}
</script>

<style scoped>
 .nav{
            margin: 30px;
            line-height: 40px;
        }
        .nav input{
            box-sizing: border-box;
            padding-left: 20px;
            border: none;
            border-radius: 25px;
            width: 80%;
            height: 25px;
            background-color: rgba(129, 128, 128, 0.141);
        }
        .nav .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav .top span{
            color: deepskyblue;
        }
        .nav .middle{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav .middle button{
            width: 20px;
            height: 20px;
        }
        .nav .con{
            padding-left: 10px;
            text-align: left;
            width: 100px;
            height: 40px;
            background-color: rgba(129, 128, 128, 0.141);
        }
        .nav .last span{
            width: 100px;
            height: 40px;
            background-color:rgba(129, 128, 128, 0.141) ;
        }
</style>